/*
 * @Description: 收藏线路的小模块
 * @Author: yingying.fan
 * @Date: 2019-07-01 12:56:12
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-07-01 12:56:12
 */
<template>
  <div
    class="flex-h flex-hsb flex-vc collection-item-wrapper"
    @click="goToLineDetail"
  >
    <div>
      <p class="fontsize28 collection-route-name">{{routeName}}</p>
      <p>开往&nbsp;&nbsp;{{lineInfo.endStation}}</p>
    </div>
    <i
      class="iconfont icon-shoucang1"
      @click.stop="removeCollection"
    ></i>
  </div>
</template>

<script>
import LineInfoModel from '../nearbysite/model/LineInfoModel'
export default {
  components: {

  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    lineInfo: {
      type: LineInfoModel
    }
  },
  data() {
    return {

    }
  },
  computed: {
    routeName() {
      if (!this.lineInfo) {
        return ''
      }
      if (escape(this.lineInfo.routeName).indexOf('%u') < 0) {
        // 路线名中如果没有中文则加上路
        return `${this.lineInfo.routeName}路`
      }
      return this.lineInfo.routeName
    }
  },
  methods: {
    removeCollection() {
      this.$emit('removeCollection', this.index, this.lineInfo)
    },
    // 跳转到线路详情
    goToLineDetail() {
      // 埋点
      let recordInfo = {
        NAERBY_LINE_ID: this.lineInfo.routeId + '',
        NAERBY_LINE_NAME: this.lineInfo.routeName + ''
      }
      this.$ThirdParty.then(ThirdParty => {
        ThirdParty.doRecordEvent(
          'home_line_nearby',
          recordInfo,
          1,
          () => { },
          () => { }
        )
      })
      // 跳转
      let params = `BUS_DIRECTION=${this.lineInfo.direction}&NAME=${this.lineInfo.routeName}&ID=${this.lineInfo.routeId}`
      let url = 'xbapp://open/bus-app/Line.html?_tv=true&' + params
      if (window.prodInApp) {
        window.location.assign(url)
      } else {
        console.log('~~~goToLineDetail~~~', url)
      }
    }
  }
}
</script>

<style>
.collection-item-wrapper {
  height: 130px;
  padding: 0 0 0 40px;
  margin-bottom: 20px;
  background-color: #ffffff;
}
.collection-route-name {
  font-weight: bold;
  margin-bottom: 14px;
}
.collection-item-wrapper > .icon-shoucang1 {
  font-size: 46px;
  color: #ff9938;
  padding: 20px 40px;
}
</style>
